.topbar {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
  height: 70px;
  padding: 0 35px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);

  &__left {
    display: flex;
    align-items: center;
  }

  &__theme {
    margin-left: 39px;
  }

  &__icon {
    display: flex;
    img, svg {
      height: 30px;
    }
  }
  &__menu {
    display: flex;
    margin-left: 20px;
  }
}

.menu {
  &__item {
    display: flex;
    align-items: center;
    margin: 0 3px;
    padding: 7px 40px;
    border-radius: 100px;
    text-decoration: none;
    color: #333;

    &:hover {
      color: #06A5FF;
    }

    &--active {
      box-shadow: 0 5px 10px rgba(6, 165, 255, 0.2);
      background: #06A5FF;

      &:hover {
        color: #000;
      }

      & * {
        color: #fff;
      }
    }

    &__icon {
      margin-right: 5px;
    }
  }
}

:host-context(body.dark) {
  .menu {
    &__item {

      &:hover {
        div {
          color: lighten(#7500f5, 25%) !important;
        }
      }

      &--active {
        background: #7500f5;
        box-shadow: 0 5px 10px rgba(117, 0, 245, 0.2);

        &:hover {
          div {
            color: #eee !important;
          }
        }
      }
    }
  }
}
